<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Probably the most complete UI kit out there. Multiple functionalities and controls added,  extended color palette and beautiful typography, designed as its own extended version of Bootstrap at  the highest level of quality.                             ">
    <meta name="author" content="Webpixels">
    <title>Boomerang UI Kit - Free Bootstrap Framework by Webpixels</title>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800|Roboto:400,500,700" rel="stylesheet">
    <!-- Plugins -->
    <link rel="stylesheet" href="../assets/vendor/animate/animate.min.css" type="text/css">
    <!-- Theme CSS -->
    <link type="text/css" href="../assets/css/theme.css" rel="stylesheet">
    <!-- Demo CSS - No need to use these in your project -->
    <link rel="stylesheet" href="../assets/vendor/jquery-scrollbar/css/jquery-scrollbar.css">
    <link type="text/css" href="../assets/vendor/highlight/css/highlight.min.css" rel="stylesheet">
    <link type="text/css" href="../assets/css/demo.css" rel="stylesheet">
  </head>
  <body>
    <main class="main">
      <aside class="sidebar" id="nav_docs">
        <div class="sidebar-brand">
          <h1 class="font-weight-400"><a href="../"><span class="font-weight-700">Boomerang</span> UI Kit</a></h1>
        </div>
        <div class="scrollbar-inner">
          <ul class="navigation pr-3">
            <li class="navigation-title">Getting started</li>
            <li class="navigation-item">
              <a href="introduction.html" class="navigation-link">Introduction</a>
            </li>
            <li class="navigation-item">
              <a href="file-structure.html" class="navigation-link">File structure</a>
            </li>
            <li class="navigation-item">
              <a href="plugins.html" class="navigation-link">Plugins</a>
            </li>
            <li class="navigation-item">
              <a href="customization.html" class="navigation-link">Customization</a>
            </li>
            <li class="navigation-item">
              <a href="update.html" class="navigation-link">Update</a>
            </li>
            <li class="navigation-title">Design elements</li>
            <li class="navigation-item">
              <a href="colors.html" class="navigation-link">Colors</a>
            </li>
            <li class="navigation-item">
              <a href="typography.html" class="navigation-link">Typography</a>
            </li>
            <li class="navigation-item">
              <a href="icons.html" class="navigation-link">Icons</a>
            </li>
            <li class="navigation-title">Components</li>
            <li class="navigation-item">
              <a href="alerts.html" class="navigation-link">Alerts</a>
            </li>
            <li class="navigation-item">
              <a href="avatars.html" class="navigation-link">Avatars</a>
            </li>
            <li class="navigation-item">
              <a href="badges.html" class="navigation-link">Badges</a>
            </li>
            <li class="navigation-item">
              <a href="buttons.html" class="navigation-link">Buttons</a>
            </li>
            <li class="navigation-item">
              <a href="cards.html" class="navigation-link">Cards</a>
            </li>
            <li class="navigation-item">
              <a href="dropdowns.html" class="navigation-link">Dropdowns</a>
            </li>
            <li class="navigation-item">
              <a href="forms.html" class="navigation-link">Forms</a>
            </li>
            <li class="navigation-item">
              <a href="modal.html" class="navigation-link">Modal</a>
            </li>
            <li class="navigation-item">
              <a href="navbar.html" class="navigation-link">Navbar</a>
            </li>
            <li class="navigation-item">
              <a href="navs.html" class="navigation-link">Navs</a>
            </li>
            <li class="navigation-item">
              <a href="pagination.html" class="navigation-link">Pagination</a>
            </li>
            <li class="navigation-item">
              <a href="progress.html" class="navigation-link">Progress</a>
            </li>
            <li class="navigation-item">
              <a href="tables.html" class="navigation-link">Tables</a>
            </li>
            <li class="navigation-item">
              <a href="tooltips.html" class="navigation-link">Tooltips</a>
            </li>
          </ul>
        </div>
      </aside>
      <section class="content">
        <div class="header">
          <div class="navigation-trigger d-xl-none" data-action="aside-open" data-target=".sidebar">
            <div class="navigation-trigger-inner">
              <i class="navigation-trigger-line"></i>
              <i class="navigation-trigger-line"></i>
              <i class="navigation-trigger-line"></i>
            </div>
          </div>
          <div class="header-brand d-xl-none">
            <h1><a href="index.html">Boomerang UI Kit</a></h1>
          </div>
          <div class="header-nav ml-auto">
            <ul class="nav align-items-center">
              <li class="nav-item d-none d-md-inline-block">
                <a class="nav-link pl-0 active" href="../">Go to UI Kit</a>
              </li>
              <li class="nav-item d-none d-md-inline-block">
                <a class="nav-link" href="../docs/changelog.html">Changelog</a>
              </li>
              <li class="nav-item ml-4">
                <a href="https://github.com/webpixels/boomerang-ui-kit/archive/master.zip" class="btn btn-sm btn-primary">Download Free</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="content-inner content-docs">
          <div class="container">
            <div class="pt-3 pb-4 mb-4 border-bottom">
              <div class="row">
                <div class="col-lg-6">
                  <h2 class="heading h2 font-weight-bold">Buttons</h2>
                  <p>Use our custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.</p>
                  <a href="http://getbootstrap.com/docs/4.0/components/buttons" target="_blank">Open Bootstrap Docs</a>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-lg-9">
                <h3 id="example">Example</h3>
                <div class="code-example">
                  <button type="button" class="btn btn-primary">Default</button>
                </div>
                <div class="highlight">
                  <pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Default<span class="nt">&lt;/button&gt;</span></code></pre>
                </div>
                <h3 id="animated-buttons">Animated buttons</h3>
                <div class="code-example">
                  <button type="button" class="btn btn-primary btn-animated btn-animated-x">
                    <span class="btn-inner--visible">Play music</span>
                    <span class="btn-inner--hidden"><i class="fas fa-play"></i></span>
                  </button>
                  <button type="button" class="btn btn-secondary btn-animated btn-animated-y">
                    <span class="btn-inner--hidden">Buy</span>
                    <span class="btn-inner--visible"><i class="fas fa-shopping-cart"></i></span>
                  </button>
                  <button type="button" class="btn btn-primary btn-animated btn-animated-x">
                    <span class="btn-inner--visible">Next step</span>
                    <span class="btn-inner--hidden"><i class="fas fa-arrow-right"></i></span>
                  </button>
                  <button type="button" class="btn btn-dark btn-animated btn-animated-y">
                    <span class="btn-inner--visible"><i class="fas fa-play"></i></span>
                    <span class="btn-inner--hidden"><i class="fas fa-pause"></i></span>
                  </button>
                </div>
                <div class="highlight">
                  <pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-animated btn-animated-x"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--visible"</span><span class="nt">&gt;</span>Play music<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--hidden"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-play"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-animated btn-animated-y"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--hidden"</span><span class="nt">&gt;</span>Buy<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--visible"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-shopping-cart"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-animated btn-animated-x"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--visible"</span><span class="nt">&gt;</span>Next step<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--hidden"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-arrow-right"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-dark btn-animated btn-animated-y"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--visible"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-play"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--hidden"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-pause"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span></code></pre>
                </div>
                <h3 id="labeled-buttons">Labeled buttons</h3>
                <div class="code-example">
                  <div class="btn-group btn-action-label" role="group" aria-label="Like">
                    <button type="button" class="btn btn-sm btn-secondary btn-action">
                      <i class="fas fa-thumbs-up"></i>
                      <span>Like</span>
                    </button>
                    <a href="#" class="btn btn-sm btn-outline-secondary btn-label">1030</a>
                  </div>
                  <div class="btn-group btn-action-label" role="group" aria-label="Like">
                    <a href="#" class="btn btn-sm btn-outline-secondary btn-label">300</a>
                    <button type="button" class="btn btn-sm btn-secondary btn-action">
                      <i class="fas fa-share-alt"></i>
                    </button>
                  </div>
                  <div class="btn-group btn-action-label" role="group" aria-label="Like">
                    <button type="button" class="btn btn-sm btn-primary btn-action">
                      <i class="fas fa-code-branch"></i>
                    </button>
                    <a href="#" class="btn btn-sm btn-outline-primary btn-label">5500</a>
                  </div>
                  <div class="btn-group btn-action-label" role="group" aria-label="Like">
                    <a href="#" class="btn btn-sm btn-outline-primary btn-label">5500</a>
                    <button type="button" class="btn btn-sm btn-primary btn-action">
                      <i class="fas fa-code-branch"></i>
                      <span>Forks</span>
                    </button>
                  </div>
                  <div class="btn-group btn-action-label" role="group" aria-label="Like">
                    <button type="button" class="btn btn-sm btn-danger btn-action">
                      <i class="fas fa-heart"></i>
                      <span>Love</span>
                    </button>
                    <a href="#" class="btn btn-sm btn-outline-danger btn-label">1030</a>
                  </div>
                  <div class="btn-group btn-action-label" role="group" aria-label="Like">
                    <a href="#" class="btn btn-sm btn-outline-danger btn-label">10000</a>
                    <button type="button" class="btn btn-sm btn-danger btn-action">
                      <i class="fas fa-heart"></i>
                    </button>
                  </div>
                </div>
                <div class="highlight">
                  <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group btn-action-label"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"Like"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-secondary btn-action"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-thumbs-up"</span><span class="nt">&gt;&lt;/i&gt;</span>
        <span class="nt">&lt;span&gt;</span>Like<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-outline-secondary btn-label"</span><span class="nt">&gt;</span>1030<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group btn-action-label"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"Like"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-outline-secondary btn-label"</span><span class="nt">&gt;</span>300<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-secondary btn-action"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-share-alt"</span><span class="nt">&gt;&lt;/i&gt;</span>
    <span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group btn-action-label"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"Like"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-primary btn-action"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-code-branch"</span><span class="nt">&gt;&lt;/i&gt;</span>
    <span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-outline-primary btn-label"</span><span class="nt">&gt;</span>5500<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group btn-action-label"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"Like"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-outline-primary btn-label"</span><span class="nt">&gt;</span>5500<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-primary btn-action"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-code-branch"</span><span class="nt">&gt;&lt;/i&gt;</span>
        <span class="nt">&lt;span&gt;</span>Forks<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group btn-action-label"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"Like"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-danger btn-action"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-heart"</span><span class="nt">&gt;&lt;/i&gt;</span>
        <span class="nt">&lt;span&gt;</span>Love<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-outline-danger btn-label"</span><span class="nt">&gt;</span>1030<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group btn-action-label"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"Like"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-outline-danger btn-label"</span><span class="nt">&gt;</span>10000<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-danger btn-action"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-heart"</span><span class="nt">&gt;&lt;/i&gt;</span>
    <span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                </div>
                <h3 id="buttons-with-icon-labels">Buttons with icon labels</h3>
                <div class="code-example">
                  <button type="button" class="btn btn-dark btn-icon-label">
                    <span class="btn-inner--icon"><i class="fas fa-play"></i></span>
                    <span class="btn-inner--text">Play now</span>
                  </button>
                  <button type="button" class="btn btn-secondary btn-icon-label">
                    <span class="btn-inner--icon"><i class="fas fa-shopping-cart"></i></span>
                    <span class="btn-inner--text">Add to cart</span>
                  </button>
                  <button type="button" class="btn btn-danger btn-icon-label">
                    <span class="btn-inner--icon"><i class="fas fa-trash-alt"></i></span>
                    <span class="btn-inner--text">Delete item</span>
                  </button>
                  <button type="button" class="btn btn-dark btn-icon-label">
                    <span class="btn-inner--text">Play now</span>
                    <span class="btn-inner--icon"><i class="fas fa-play"></i></span>
                  </button>
                  <button type="button" class="btn btn-secondary btn-icon-label">
                    <span class="btn-inner--text">Add to cart</span>
                    <span class="btn-inner--icon"><i class="fas fa-shopping-cart"></i></span>
                  </button>
                  <button type="button" class="btn btn-danger btn-icon-label">
                    <span class="btn-inner--text">Delete item</span>
                    <span class="btn-inner--icon"><i class="fas fa-trash-alt"></i></span>
                  </button>
                </div>
                <div class="highlight">
                  <pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-dark btn-icon-label"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--icon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-play"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--text"</span><span class="nt">&gt;</span>Play now<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-icon-label"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--icon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-shopping-cart"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--text"</span><span class="nt">&gt;</span>Add to cart<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger btn-icon-label"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--icon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-trash-alt"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--text"</span><span class="nt">&gt;</span>Delete item<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-dark btn-icon-label"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--text"</span><span class="nt">&gt;</span>Play now<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--icon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-play"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-icon-label"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--text"</span><span class="nt">&gt;</span>Add to cart<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--icon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-shopping-cart"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger btn-icon-label"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--text"</span><span class="nt">&gt;</span>Delete item<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--icon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-trash-alt"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span></code></pre>
                </div>
                <h3 id="icon-buttons">Icon buttons</h3>
                <div class="code-example">
                  <button type="button" class="btn btn-sm btn-outline-primary btn-icon">
                    <span class="btn-inner--text">Create account</span>
                    <span class="btn-inner--icon"><i class="fas fa-user"></i></span>
                  </button>
                  <button type="button" class="btn btn-sm btn-outline-secondary btn-icon">
                    <span class="btn-inner--text">Next step</span>
                    <span class="btn-inner--icon"><i class="fas fa-arrow-right"></i></span>
                  </button>
                  <button type="button" class="btn btn-sm btn-outline-danger btn-icon">
                    <span class="btn-inner--text">Deactivate</span>
                    <span class="btn-inner--icon"><i class="fas fa-user-times"></i></span>
                  </button>
                  <button type="button" class="btn btn-primary btn-icon">
                    <span class="btn-inner--icon"><i class="fas fa-user"></i></span>
                    <span class="btn-inner--text">Create account</span>
                  </button>
                  <button type="button" class="btn btn-secondary btn-icon">
                    <span class="btn-inner--icon"><i class="fas fa-arrow-left"></i></span>
                    <span class="btn-inner--text">Previous step</span>
                  </button>
                  <button type="button" class="btn btn-danger btn-icon">
                    <span class="btn-inner--icon"><i class="fas fa-user-times"></i></span>
                    <span class="btn-inner--text">Deactivate</span>
                  </button>
                  <button type="button" class="btn btn-primary btn-icon-only">
                    <span class="btn-inner--icon"><i class="fas fa-user"></i></span>
                  </button>
                  <button type="button" class="btn btn-secondary btn-icon-only">
                    <span class="btn-inner--icon"><i class="fas fa-arrow-left"></i></span>
                  </button>
                  <button type="button" class="btn btn-danger btn-icon-only">
                    <span class="btn-inner--icon"><i class="fas fa-trash-alt"></i></span>
                  </button>
                  <button type="button" class="btn btn-primary btn-icon-only rounded-circle">
                    <span class="btn-inner--icon"><i class="fas fa-user"></i></span>
                  </button>
                  <button type="button" class="btn btn-secondary btn-icon-only btn-circle rounded-circle">
                    <span class="btn-inner--icon"><i class="fas fa-arrow-left"></i></span>
                  </button>
                  <button type="button" class="btn btn-danger btn-icon-only rounded-circle">
                    <span class="btn-inner--icon"><i class="fas fa-trash-alt"></i></span>
                  </button>
                </div>
                <div class="highlight">
                  <pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-outline-primary btn-icon"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--text"</span><span class="nt">&gt;</span>Create account<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--icon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-user"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-outline-secondary btn-icon"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--text"</span><span class="nt">&gt;</span>Next step<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--icon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-arrow-right"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-outline-danger btn-icon"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--text"</span><span class="nt">&gt;</span>Deactivate<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--icon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-user-times"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-icon"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--icon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-user"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--text"</span><span class="nt">&gt;</span>Create account<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-icon"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--icon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-arrow-left"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--text"</span><span class="nt">&gt;</span>Previous step<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger btn-icon"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--icon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-user-times"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--text"</span><span class="nt">&gt;</span>Deactivate<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-icon-only"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--icon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-user"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-icon-only"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--icon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-arrow-left"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger btn-icon-only"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--icon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-trash-alt"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-icon-only rounded-circle"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--icon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-user"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-icon-only btn-circle rounded-circle"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--icon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-arrow-left"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger btn-icon-only rounded-circle"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--icon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-trash-alt"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span></code></pre>
                </div>
                <h3 id="toolbars">Toolbars</h3>
                <div class="code-example">
                  <div class="mb-5">
                    <div class="btn-group" role="group" aria-label="Basic example">
                      <button type="button" class="btn btn-secondary">Left</button>
                      <button type="button" class="btn btn-secondary">Middle</button>
                      <button type="button" class="btn btn-secondary">Right</button>
                    </div>
                  </div>
                  <div class="mb-5">
                    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
                      <div class="btn-group mr-2" role="group" aria-label="First group">
                        <button type="button" class="btn btn-secondary"><i class="fas fa-align-left"></i></button>
                        <button type="button" class="btn btn-secondary"><i class="fas fa-align-center"></i></button>
                        <button type="button" class="btn btn-secondary active"><i class="fas fa-align-right"></i></button>
                        <button type="button" class="btn btn-secondary"><i class="fas fa-align-justify"></i></button>
                      </div>
                      <div class="btn-group mr-2" role="group" aria-label="Second group">
                        <button type="button" class="btn btn-secondary"><i class="fas fa-bold"></i></button>
                        <button type="button" class="btn btn-secondary"><i class="fas fa-italic"></i></button>
                        <button type="button" class="btn btn-secondary"><i class="fas fa-underline"></i></button>
                      </div>
                      <div class="btn-group" role="group" aria-label="Third group">
                        <button type="button" class="btn btn-secondary"><i class="fas fa-font"></i></button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="highlight">
                  <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-5"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"Basic example"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Left<span class="nt">&lt;/button&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Middle<span class="nt">&lt;/button&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Right<span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-5"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-toolbar"</span> <span class="na">role=</span><span class="s">"toolbar"</span> <span class="na">aria-label=</span><span class="s">"Toolbar with button groups"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group mr-2"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"First group"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-align-left"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
            <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-align-center"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
            <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary active"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-align-right"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
            <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-align-justify"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group mr-2"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"Second group"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-bold"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
            <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-italic"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
            <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-underline"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"Third group"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-font"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                </div>
                <h3 id="colors">Colors</h3>
                <div class="code-example">
                  <div class="row">
                    <div class="col-lg-3">
                      <button type="button" class="btn btn-block btn-primary">Primary</button>
                    </div>
                    <div class="col-lg-3">
                      <button type="button" class="btn btn-block btn-secondary">Secondary</button>
                    </div>
                    <div class="col-lg-3">
                      <button type="button" class="btn btn-block btn-dark">Dark</button>
                    </div>
                  </div>
                  <div class="row mt-4">
                    <div class="col-lg-3">
                      <button type="button" class="btn btn-block btn-danger">Danger</button>
                    </div>
                    <div class="col-lg-3">
                      <button type="button" class="btn btn-block btn-warning">Warning</button>
                    </div>
                    <div class="col-lg-3">
                      <button type="button" class="btn btn-block btn-success">Success</button>
                    </div>
                    <div class="col-lg-3">
                      <button type="button" class="btn btn-block btn-info">Info</button>
                    </div>
                  </div>
                  <div class="row mt-4">
                    <div class="col-lg-3">
                      <button type="button" class="btn btn-block btn-outline-primary">Primary</button>
                    </div>
                    <div class="col-lg-3">
                      <button type="button" class="btn btn-block btn-outline-secondary">Secondary</button>
                    </div>
                    <div class="col-lg-3">
                      <button type="button" class="btn btn-block btn-outline-dark">Dark</button>
                    </div>
                  </div>
                  <div class="row mt-4">
                    <div class="col-lg-3">
                      <button type="button" class="btn btn-block btn-outline-danger">Danger</button>
                    </div>
                    <div class="col-lg-3">
                      <button type="button" class="btn btn-block btn-outline-warning">Warning</button>
                    </div>
                    <div class="col-lg-3">
                      <button type="button" class="btn btn-block btn-outline-success">Success</button>
                    </div>
                    <div class="col-lg-3">
                      <button type="button" class="btn btn-block btn-outline-info">Info</button>
                    </div>
                  </div>
                </div>
                <div class="highlight">
                  <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-3"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-block btn-primary"</span><span class="nt">&gt;</span>Primary<span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-3"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-block btn-secondary"</span><span class="nt">&gt;</span>Secondary<span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-3"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-block btn-dark"</span><span class="nt">&gt;</span>Dark<span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row mt-4"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-3"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-block btn-danger"</span><span class="nt">&gt;</span>Danger<span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-3"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-block btn-warning"</span><span class="nt">&gt;</span>Warning<span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-3"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-block btn-success"</span><span class="nt">&gt;</span>Success<span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-3"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-block btn-info"</span><span class="nt">&gt;</span>Info<span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row mt-4"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-3"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-block btn-outline-primary"</span><span class="nt">&gt;</span>Primary<span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-3"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-block btn-outline-secondary"</span><span class="nt">&gt;</span>Secondary<span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-3"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-block btn-outline-dark"</span><span class="nt">&gt;</span>Dark<span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row mt-4"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-3"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-block btn-outline-danger"</span><span class="nt">&gt;</span>Danger<span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-3"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-block btn-outline-warning"</span><span class="nt">&gt;</span>Warning<span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-3"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-block btn-outline-success"</span><span class="nt">&gt;</span>Success<span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-3"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-block btn-outline-info"</span><span class="nt">&gt;</span>Info<span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                </div>
                <h3 id="states">States</h3>
                <div class="code-example">
                  <button type="button" class="btn btn-sm btn-primary active px-5">Active</button>
                  <button type="button" class="btn btn-sm btn-secondary active px-5">Active</button>
                  <button type="button" class="btn btn-sm btn-primary px-5" disabled="">Disabled</button>
                  <button type="button" class="btn btn-sm btn-secondary px-5" disabled="">Disabled</button>
                  <button type="button" class="btn btn-sm btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">Single toggle</button>
                  <button type="button" class="btn btn-sm btn-primary px-5"><i class="fas fa-spinner fa-spin"></i></button>
                  <button type="button" class="btn btn-sm btn-secondary px-5"><i class="fas fa-spinner fa-spin"></i></button>
                  <button type="button" class="btn btn-sm btn-primary px-5"><i class="fas fa-circle-notch fa-spin"></i></button>
                  <button type="button" class="btn btn-sm btn-secondary px-5"><i class="fas fa-circle-notch fa-spin"></i></button>
                </div>
                <div class="highlight">
                  <pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-primary active px-5"</span><span class="nt">&gt;</span>Active<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-secondary active px-5"</span><span class="nt">&gt;</span>Active<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-primary px-5"</span> <span class="na">disabled</span><span class="nt">&gt;</span>Disabled<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-secondary px-5"</span> <span class="na">disabled</span><span class="nt">&gt;</span>Disabled<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"button"</span> <span class="na">aria-pressed=</span><span class="s">"false"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span>Single toggle<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-primary px-5"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-spinner fa-spin"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-secondary px-5"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-spinner fa-spin"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-primary px-5"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-circle-notch fa-spin"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-secondary px-5"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-circle-notch fa-spin"</span><span class="nt">&gt;&lt;/i&gt;&lt;/button&gt;</span></code></pre>
                </div>
                <h3 id="sizing">Sizing</h3>
                <div class="code-example">
                  <button class="btn btn-sm btn-secondary">Small size</button>
                  <button class="btn btn-secondary">Default size</button>
                  <button class="btn btn-lg btn-secondary">Large size</button>
                  <button class="btn btn-xl btn-secondary">Extra Large size</button>
                </div>
                <div class="highlight">
                  <pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-secondary"</span><span class="nt">&gt;</span>Small size<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Default size<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-lg btn-secondary"</span><span class="nt">&gt;</span>Large size<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-xl btn-secondary"</span><span class="nt">&gt;</span>Extra Large size<span class="nt">&lt;/button&gt;</span></code></pre>
                </div>
                <h3 id="social-buttons">Social buttons</h3>
                <div class="code-example">
                  <button type="button" class="btn btn-facebook btn-icon-label">
                    <span class="btn-inner--icon"><i class="fab fa-facebook"></i></span>
                    <span class="btn-inner--text">Facebook</span>
                  </button>
                  <button type="button" class="btn btn-twitter btn-icon-label">
                    <span class="btn-inner--icon"><i class="fab fa-twitter"></i></span>
                    <span class="btn-inner--text">Twitter</span>
                  </button>
                  <button type="button" class="btn btn-google-plus btn-icon-label">
                    <span class="btn-inner--icon"><i class="fab fa-google-plus-g"></i></span>
                    <span class="btn-inner--text">Google +</span>
                  </button>
                  <button type="button" class="btn btn-instagram btn-icon-label">
                    <span class="btn-inner--icon"><i class="fab fa-instagram"></i></span>
                    <span class="btn-inner--text">Instagram</span>
                  </button>
                  <button type="button" class="btn btn-pinterest btn-icon-label">
                    <span class="btn-inner--icon"><i class="fab fa-pinterest"></i></span>
                    <span class="btn-inner--text">Pinterest</span>
                  </button>
                  <button type="button" class="btn btn-youtube btn-icon-label">
                    <span class="btn-inner--icon"><i class="fab fa-youtube"></i></span>
                    <span class="btn-inner--text">Youtube</span>
                  </button>
                  <button type="button" class="btn btn-slack btn-icon-label">
                    <span class="btn-inner--icon"><i class="fab fa-slack"></i></span>
                    <span class="btn-inner--text">Slack</span>
                  </button>
                  <button type="button" class="btn btn-dribbble btn-icon-label">
                    <span class="btn-inner--icon"><i class="fab fa-dribbble"></i></span>
                    <span class="btn-inner--text">Dribbble</span>
                  </button>
                </div>
                <div class="highlight">
                  <pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-facebook btn-icon-label"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--icon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fab fa-facebook"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--text"</span><span class="nt">&gt;</span>Facebook<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-twitter btn-icon-label"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--icon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fab fa-twitter"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--text"</span><span class="nt">&gt;</span>Twitter<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-google-plus btn-icon-label"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--icon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fab fa-google-plus-g"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--text"</span><span class="nt">&gt;</span>Google +<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-instagram btn-icon-label"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--icon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fab fa-instagram"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--text"</span><span class="nt">&gt;</span>Instagram<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-pinterest btn-icon-label"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--icon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fab fa-pinterest"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--text"</span><span class="nt">&gt;</span>Pinterest<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-youtube btn-icon-label"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--icon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fab fa-youtube"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--text"</span><span class="nt">&gt;</span>Youtube<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-slack btn-icon-label"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--icon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fab fa-slack"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--text"</span><span class="nt">&gt;</span>Slack<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-dribbble btn-icon-label"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--icon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fab fa-dribbble"</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn-inner--text"</span><span class="nt">&gt;</span>Dribbble<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span></code></pre>
                </div>
              </div>
              <div class="col-lg-3 d-none d-lg-inline-block">
                <div class="sidebar-sticky" data-stick-in-parent="true">
                  <ul class="section-nav">
                    <li class="toc-entry toc-h3"><a href="#example">Example</a></li>
                    <li class="toc-entry toc-h3"><a href="#animated-buttons">Animated buttons</a></li>
                    <li class="toc-entry toc-h3"><a href="#labeled-buttons">Labeled buttons</a></li>
                    <li class="toc-entry toc-h3"><a href="#buttons-with-icon-labels">Buttons with icon labels</a></li>
                    <li class="toc-entry toc-h3"><a href="#icon-buttons">Icon buttons</a></li>
                    <li class="toc-entry toc-h3"><a href="#toolbars">Toolbars</a></li>
                    <li class="toc-entry toc-h3"><a href="#colors">Colors</a></li>
                    <li class="toc-entry toc-h3"><a href="#states">States</a></li>
                    <li class="toc-entry toc-h3"><a href="#sizing">Sizing</a></li>
                    <li class="toc-entry toc-h3"><a href="#social-buttons">Social buttons</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <footer class="px-3 footer bg-white">
          <div class="container ">
            <div class="row align-items-center py-3 border-top">
              <div class="col-lg-6 text-center text-lg-left mb-2 mb-lg-0">
                &copy; 2018 <a href="https://webpixels.io/" target="_blank">Webpixels</a>. All rights reserved.
              </div>
              <div class="col-lg-6 text-center text-lg-right">
                <ul class="nav justify-content-center justify-content-lg-end">
                  <li class="nav-item">
                    <a class="nav-link active" href="https://instagram.com/webpixelsofficial" target="_blank"><i class="fab fa-instagram"></i></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://facebook.com/webpixels" target="_blank"><i class="fab fa-facebook"></i></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://github.com/webpixels" target="_blank"><i class="fab fa-github"></i></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://dribbble.com/webpixels" target="_blank"><i class="fab fa-dribbble"></i></a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </footer>
      </section>
    </main>
    <!-- Core -->
    <script src="../assets/vendor/jquery/jquery.min.js"></script>
    <script src="../assets/vendor/popper/popper.min.js"></script>
    <script src="../assets/js/bootstrap/bootstrap.min.js"></script>
    <!-- FontAwesome 5 -->
    <script src="../assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
    <!-- Scripts used only for this demo only - Remove these in your project -->
    <script src="../assets/vendor/jquery-scrollbar/js/jquery-scrollbar.min.js"></script>
    <script src="../assets/vendor/jquery-scrollLock/jquery-scrollLock.min.js"></script>
    <script src="../assets/vendor/sticky-kit/sticky-kit.min.js"></script>
    <script src="../assets/vendor/highlight/js/highlight.min.js"></script>
    <script src="../assets/vendor/clipboard-js/clipboard.min.js"></script>
    <script src="../assets/vendor/holderjs/holder.min.js"></script>
    <script src="../assets/js/demo.js"></script>
    <!-- Theme JS -->
    <script src="../assets/js/theme.js"></script>
  </body>
</html>